<template>
	<body-wrap isFlex>
		<view class="zxbmain">
			<view class="zxbInfo" v-for="dt in lists" :key="dt._id" @click="setItem(dt)" :class="{'selected':curItem._id==dt._id}">
				<view class="xxbox">
					<view class="name">{{dt.title}}</view>
					<view class="express">有效期：{{dt.type==2?dt.limitTime:(dt.type==3?dt.expires:'--')}} 天</view>
					<view class="price">价格：￥<text class="num">{{dt.price}}</text></view>
				</view>
			</view>
		</view>
		<template #footer>
			<div class="footer-btn-box">
				<!-- <view class="myBtn" @click="goPay">立即购买</view> -->
				<view class="myBtn" @click="openDg">立即购买</view>
			</div>
		</template>
		
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确认" title="提示" @confirm="goPay" @close="">
				<radio-group @change="radioChange">
					<view class="pgdgbox">
						<label class="item">
							<radio value="1" :checked="true"/> <view>个人购买</view>
						</label>
						<label class="item">
							<radio value="2" /><view>公司购买</view>
						</label>
					</view>
				</radio-group>
			</uni-popup-dialog>
		</uni-popup>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import cmImage from "@/components/cmImage/index.vue"
	import {getCouponList} from "@/api/consult.js"
	import {toast} from '@/utils/common.js'
	export default defineComponent({
		components:{
			bodyWrap,
			cmImage
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo),
				lists:[],
				pageIndex:1,
				pageSize:20,
				curItem:'',
				buyType:1
			})
			
			onMounted(()=>{
				store.commit('base/init_orderInfo',{})
				get_coupon_list()
				
			})
			
			const get_coupon_list = ()=>{
				getCouponList({
					pageIndex:state.pageIndex,
					pageSize:state.pageSize,
					type:[2,3]
				}).then(res =>{
					state.lists = res.data.data || []
				})
			}
			
			const setItem = (item)=>{
				state.curItem = item
			}
			const openDg= ()=>{
				proxy.$refs.popup.open()
			}
			const radioChange =(e)=> {
				state.buyType = e.detail.value
			}
			
			const goPay = ()=>{
				if(!state.curItem){
					return toast('请选择要购买的咨询包')
				}
				
				// const pages = getCurrentPages();
				// const currentPage = pages[pages.length - 1];
				// const fullPath = currentPage.$page.fullPath
				// store.commit('base/set_backUrl',currentPage.$page.fullPath)
				store.commit('base/set_backUrl','/pages/home/package/index')
				
				const orderinfo = {
					productId:state.curItem._id, // 商品id
					orderType:63, // 咨询包购买
					product:state.curItem, // 购买的产品信息
					price:state.curItem.price,// 商品价格
					name:state.curItem.title,// 商品名称
					sellerId:state.curItem.owner, // 卖家id（可能不存在，不在则为平台的咨询包）
					buyType:state.buyType
				}
				store.commit('base/set_orderInfo',orderinfo)
				if(state.buyType==2){  // 公司购买
					uni.navigateTo({
						url:'/pages/company/set'
					})
				}else{
					uni.navigateTo({
						url:'/pages/order/order'
					})
				}
				
			}
			
			return {
				...toRefs(state),
				setItem,
				openDg,
				radioChange,
				goPay
			}
		}
	})
</script>

<style lang="scss" scoped>
	.zxbmain{
		flex: 1;
		flex-shrink: 0;
		padding: 20rpx;
		padding-top: 40rpx;
		.zxbInfo{
			display: flex;
			border-radius: 15rpx;
			box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
			background: #fff;
			padding: 20rpx;
			&.selected{
				background: rgba(227,175,45,0.5);
			}
			&+.zxbInfo{
				margin-top: 20rpx;
			}
			.xxbox{
				flex: 1;
				flex-shrink: 0;
				line-height: 50rpx;
				.name{
					font-size: 30rpx;
					font-weight: bold;
				}
				.express{
					font-size: 28rpx;
					color: #999;
					padding: 0;
				}
				.price{
					.num{
						font-size: 40rpx;
						color: red;
					}
				}
			}
			.rdbox{
				display: flex;
				align-items: center;
				padding: 0 0 0 15rpx;
			}
		}
	}
	.pgdgbox{
		display: flex;
		padding: 20rpx 0;
		.item{
			display: flex;
			&+.item{
				margin-left: 40rpx;
			}
		}
	}
</style>
